<template>
  <el-dialog title="Notifications" :visible.sync="dialogVisible" width="400px" @open="handleTextMore">
    <div class="notice">
      <div class="noData" v-if="noticeList.length === 0">No new notifications</div>
      <div class="notice-item" v-for="(item, index) in noticeList" :key="item.id">
        <img class="notice-item-avatar" :src="item.headUrl" alt="">
        <div class="notice-item-text">
          <div class="text1">{{item.realName}} apply join to the group</div>
          <div class="box">
            <input type="checkbox" name="toggle" :id="'toggle'+index" style="display: none;">
            <p class="text2">{{item.description}}</p>
            <label :for="'toggle'+index"></label>
          </div>
          <div class="text3">{{ GlobalTimeformat(item.createDate, 'HH:mm', $store.state.timeFormat)}}</div>
        </div>
        <i style="position: absolute; top: 22px; right: 50px; cursor: pointer;font-size: 20px" class="cuifont icon_checkmark_circle" @click="approval('1', item)"></i>
        <i style="position: absolute; top: 22px; right: 22px; cursor: pointer;font-size: 20px" class="cuifont icon_dismiss_circle_o" @click="approval('2', item)"></i>
      </div>
    </div>
    <z-notice :visible.sync="showNotice" v-bind="noticeObject" @ok="ok"></z-notice>
  </el-dialog>
</template>

<script>
import ZNotice from '@/components/storybook/z-dialog-notice'
import { GlobalTimeformat } from '@/utils/common'
export default {
  name: 'member-notifications',
  props: ['visible', 'noticeNumber'],
  components: {
    ZNotice
  },
  data () {
    return {
      GlobalTimeformat,
      loading: false,
      noticeList: [],
      showNotice: false,
      noticeObject: {
        icon: 'icon_message-alt-error',
        title: 'Are you sure you want to exit this group？',
        info: 'You cannot undo this operation. Please double-check before you proceed.',
        okButton: {
          text: 'Confirm',
          type: 'primary'
        },
        closeButton: {
          text: 'Cancel'
        }
      },
      selectItem: null,
      selectStatus: null
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    async getGroupUserList () {
      this.loading = true
      const params = {
        groupId: this.$route.query.groupId,
        approval: 0
      }
      const { applyPeerGroupList } = this.$interface.system
      const { data } = await applyPeerGroupList(params)
      this.noticeList = data.data.records
      this.$emit('update:noticeNumber', this.noticeList.length)
      this.loading = false
    },
    async approval (approval, item) {
      this.selectItem = item
      this.selectStatus = approval
      if (approval === '1') {
        this.noticeObject.title = ''
        this.noticeObject.info = 'This member will be added to this group. Please confirm if you wish to continue.'
      } else {
        if (approval === '2') {
          this.noticeObject.title = ''
          this.noticeObject.info = 'The application for membership was declined. Please confirm if you wish to continue.'
        }
      }
      this.showNotice = true
    },
    async ok () {
      this.loading = true
      const params = {
        approval: this.selectStatus,
        userId: this.selectItem.userId,
        groupId: this.$route.query.groupId
      }
      const { approvalPeerGroup } = this.$interface.system
      const { data } = await approvalPeerGroup(params)
      if (data.code === 0) {
        this.$message.success('Success')
        await this.getGroupUserList()
        this.$emit('getData')
      } else {
        this.$message.error(data.msg)
      }
      this.loading = false
    },
    handleTextMore () {
      this.$nextTick(() => {
        let list = document.querySelectorAll('p.text2')
        list.forEach(item => {
          item.classList[item.scrollHeight > item.offsetHeight ? 'add' : 'remove']('truncated')
        })
      })
    }
  },
  created () {
    this.getGroupUserList()
  }
}
</script>

<style scoped lang="scss">
input[name="toggle"]:checked {
  & + p {
    -webkit-line-clamp: unset;
  }
}
label {
  margin: 6px 0 8px 0;
  font-size: 12px;
  &::after {
    content: "See More";
    cursor: pointer;
    color: #0043CE;
  }
}
input[name="toggle"]:checked {
  & ~ label {
    &::after {
      content: "See Less";
    }
  }
}
p {
  &.truncated {
    & + label {
      display: block;
    }
  }
}

label {
  display: none;
}
.notice{
  overflow-y: auto;
  max-height: 500px;
  .noData {
    line-height: 300px;
    text-align: center;
  }
  &-item {
    padding: 12px 14px;
    border-radius: 4px;
    border: 1px solid #0000000F;
    display: flex;
    position: relative;
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
    &-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
    }
    &-text {
      width: 224px;
      .text1 {
        font-size: 14px;
        color: #000000E5;
        line-height: 20px;
      }
      .text2 {
        color: #000000E5;
        line-height: 20px;
        font-size: 14px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 0;
        margin: 4px 0;
      }
      .text3 {
        color: #0000009B;
        line-height: 16px;
        font-size: 12px;
      }
    }
  }
}

</style>
